import React, { Component } from 'react'
import { message } from 'antd'
const style = {
    btnOut: { width: '3rem', height: '50px', background: 'rgba(204,204,204,0.5)', fontSize: '20px' },
    menu: { padding: '0px 20px', height: '50px'},
    menus: { padding: '0px 20px', height: '50px', borderBottom: '2px solid #249CF9', color: '#249CF9'},
    close: { fontSize: '18px', color: '#666666'}
}
class OpenMenu extends Component {
    /* 刪除 */
    deleteMenu = (idx, info) => {
        let menu = this.props.info
        let newIdx = menu.open.length - 2
        if (newIdx >= 0) {
            menu.open.splice(idx, 1);
            this.selectMenu(newIdx, menu.open[newIdx]);
        } else {
            message.error('请保留一个')
        }
    }
    /* 选中 */
    selectMenu = (idx, info) => {
        let one = 'one' + info.pid
        let menuOpen = this.props.info
        menuOpen.idx = idx;
        let oneHave = menuOpen.one.findIndex((value) => {
            return value === one
        })
        if (oneHave < 0) {
            menuOpen.one.push(one);
        }
        menuOpen.two = info.id
        this.props.openMenuBack(menuOpen)
        this.props.props.history.push(info.url)
    }
    /* 点击 */
    leftChilk=(type)=>{
        let menuCt = this.refs.menuCt
        let menuInfo = this.refs.menuInfo
        if(type==='left'){
            if(menuCt.clientWidth<menuInfo.clientWidth){
                menuCt.scrollLeft = 50 + menuCt.scrollLeft
            }
        }else{
            if(menuCt.clientWidth<menuInfo.clientWidth){
                menuCt.scrollLeft = -50+ menuCt.scrollLeft
            }
        }
    }
    render() {
        return (
            <div className='flexfs' style={{ width: '100%', height: '50px' }}>
                <div className='flexct pointer' style={style.btnOut} onClick={this.leftChilk.bind(this,'left')}>
                    ＜
                </div>
                <div ref='menuCt' className='flexfs ov-scroll' style={{ width: '100%', height: '50px', background: 'white'}}>
                    <div ref='menuInfo' className='flexfs'>
                        {this.props.info.open.map((item, idx) => {
                            return (
                                <div className='flexlb pointer' key={idx} style={idx === this.props.info.idx ? style.menus : style.menu}>
                                    <div onClick={this.selectMenu.bind(this, idx, item)} style={{width:'80px',textAlign:'center'}}>{item.menuName}</div>

                                    {idx === this.props.info.idx ?
                                        <label style={style.close} onClick={this.deleteMenu.bind(this, idx, item)}>×</label>
                                        :
                                        <label style={style.close}></label>
                                    }
                                </div>
                            )
                        })}
                    </div>
                </div>
                <div className='flexct pointer' style={style.btnOut} onClick={this.leftChilk.bind(this,'right')}>＞</div>
            </div>
        )
    }
}
export default OpenMenu